<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <label for="name" class="form-label">Name:</label>
                <input type="text" class="form-control" id="name" placeholder="John">
            </div>
        </div>
        <div class="row">
            <div class="col">
                <label for="lastname" class="form-label">Lastname:</label>
                <input type="text" class="form-control" id="lastname" placeholder="Doe">
            </div>
        </div>
        <div class="row">
            <div class="col text-end mt-3">
                <button class="btn btn-success" id="addButton"> Add</button>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Lastname</th>
                        </tr>
                    </thead>
                    <tbody id="list">
                        <tr class="text-center">
                            <td colspan="2"> Empty List</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>
    <script>
        const name = document.querySelector('#name');
        const lastname = document.querySelector('#lastname');
        const addButton = document.querySelector('#addButton');
        const listTable = document.querySelector('#list');

        addButton.addEventListener('click', () => {
            name.classList.remove('is-invalid')
            lastname.classList.remove('is-invalid')
            console.log("开始调用 cj 函数")

            save(name.value, lastname.value).then((error) => {

                console.log("cj 函数完成")
                if (error.name) {
                    name.classList.add('is-invalid')
                }
                if (error.lastname) {
                    lastname.classList.add('is-invalid')
                }
            });
            getList().then((list) => {
                if (list.length > 0) {
                    listRows = '';
                    list.forEach((element) => {
                        listRows += '<tr>';
                        listRows += '<td>' + element.name + '</td>';
                        listRows += '<td>' + element.lastname + '</td>';
                        listRows += '</tr>';
                    });
                    listTable.innerHTML = listRows;
                }
            });

        });

    </script>
</body>

</html>